<template>
    <div class="detail">
        <div>
            <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000"
                @change="onChange">
                <nut-swiper-item v-for="item in detail.goodsCarouselList" :key="item">
                    <img :src="item" mode="aspectFit" alt="" />
                </nut-swiper-item>
                <template #page>
                    <div class="swiper-pagination"> {{ val }}/{{
                        detail.goodsCarouselList ? detail.goodsCarouselList.length : 0 }} </div>
                </template>
            </nut-swiper>
        </div>
        <div class="info">
            <div class="goods-title flex-a flex-b">
                <div>
                    {{ detail.goodsName }}
                </div>
            </div>
            <div class="price flex-a flex-b">
                <div class="flex-a">
                    <text class="sell">￥{{ detail.originalPrice }}</text><text class="orgin">{{ '折后价 ￥' +
                        detail.sellingPrice
                    }}</text>
                </div>
                <nut-button shape="square" type="warning" style="border-radius: 50rpx;" size="small"
                    v-if="user.role == 201" @click="fxShow">分销</nut-button>
                <!-- <Heart1 v-if="detail.goodStatus == 0" size="16px" color="#5E5E5E" @click="collect" />
                <HeartFill v-if="detail.goodStatus == 1" size="16px" color="#FC5930" @click="resetCollect" /> -->
            </div>
            <div class="des flex-a flex-b">
                <div>已有<text>{{ orderNum }}</text>人下单</div>
                <div>{{ collectNum }}人想要</div>
                <!-- <div>{{ collectNum }}人想要丨2379浏览</div> -->
            </div>
            <!-- <div class="time"><nut-countdown :end-time="end" /></div> -->
            <!-- <div class="coupon flex-a flex-b" v-if="detail.list.length > 0">
                <div class="flex-a">
                    <text v-for="item in detail.list">{{ item.min + '减' + item.discount }}</text>
                </div>
                <div class="flex-a" @click="showCoupon">
                    <text>{{ detail.list.length }}个优惠</text>
                    <RectDown size="14" />
                </div>
            </div> -->
        </div>
        <div class="promotion">
            <div class="coupon flex-a flex-b" v-if="couponList.length > 0">
                <div class="flex-a">
                    <block v-for="(item, index) in couponList">
                        <text v-if="index < 3">
                            {{ item.min + '减' + item.discount }}
                        </text>
                    </block>
                </div>
                <div class="flex-a" @click="showAll">
                    <text>{{ couponList.length }}个优惠</text>
                    <RectDown size="14" />
                </div>
            </div>
            <div v-for="(item, index) in cxActive" :key="index" @click="showAll" class="flex-a cxActive">
                <text class="name" v-if="index == 0">促销</text>
                <text :class="index == 0 ? 'text ac' : 'text'">{{ item.nameText }}</text>
                <text class="des">{{ item.infoText }}</text>
                <Right color="#75787B" size="12px" />
            </div>
        </div>
        <div class="choose">
            <div class="selest" @click="selShow">
                <text>已选</text>
                <text>{{ specId != '' ? detail.specInfoList[select].specName : detail.spec }}</text>
            </div>
            <div class="selest" @click="selShow">
                <text>送至</text>
                <text>{{ addrInfo && addrInfo.addressId ? addrInfo.provinceName + addrInfo.cityName +
                    addrInfo.regionName +
                    addrInfo.detailAddress : '北京省北京市东城区' }}</text>
            </div>
            <div class="bz flex">
                <!-- <div class="flex-a">
                    <img src="https://cxj.szzkba.cn/upload/i/2024/09/18/143744_1.png
" alt=""><text>七天无理由退货</text>
                </div> -->
                <div class="flex-a">
                    <img src="https://s21.ax1x.com/2025/03/07/pEtFy0e.png" alt=""><text>官方质量保证</text>
                </div>
                <div class="flex-a">
                    <img src="https://s21.ax1x.com/2025/03/07/pEtFDOO.png" alt=""><text>极速发货</text>
                </div>
            </div>
        </div>
        <!-- <rich-text :nodes="html"></rich-text> -->
        <nut-tabs v-model="tab" background="#ffffff" auto-height>
            <nut-tab-pane title="商品详情" pane-key="0">
                <div class="content">
                    <rich-text :nodes="html"></rich-text>
                </div>
            </nut-tab-pane>
            <nut-tab-pane title="评价" pane-key="1">
                <div class="">
                    <!-- <div class="evaluate flex-a">
                        <div class="sort">服务评价</div>
                        <div class="server flex-a flex-b">
                            <span>最近已有{{ commontList.length }}条评价</span>
                            <Right size="12" color="#999" />
                        </div>
                    </div> -->
                    <div class="eval-list" v-if="commontList.length > 0">
                        <div class="eval-item" v-for="item in commontList" :key="item.ID">
                            <div class="head flex-a flex-b">
                                <div class="avatar flex-a">
                                    <img :src="item.introduceSign" alt="">
                                    <div class="nick">
                                        <div>{{ item.userName }}</div>
                                    </div>
                                </div>
                                <div class="time">{{ item.createTime }}</div>
                            </div>
                            <!-- <div class="spec flex-a">
                                <div>服务类别：上门费</div>
                                <div>套餐：默认</div>
                            </div> -->
                            <div class="box">
                                <div class="text">{{ item.shareContent }}</div>
                                <div class="star flex-a">
                                    <!-- <nut-rate v-model="value" allow-half active-color="#F6B125" /> -->
                                </div>
                                <div class="imgs">
                                    <block v-for="ele in item.shareUrlList">
                                        <img :src="ele.url" v-if="ele.shareType == '1'" alt="" @click="showFn(item)">
                                        <video id="video" v-if="ele.shareType == '2'"
                                            style="width: 50%;height:200rpx;margin-left: 10rpx;" :src="ele.url"
                                            initial-time="0" :controls="true" :autoplay="false" :loop="false"
                                            :muted="false" />
                                    </block>
                                </div>

                                <!-- <div class="imgs" v-if="item.shareType == '1'">
                                    <img :src="ele" alt="" v-for="ele in item.shareUrlList" @click="showFn(item)">
                                </div>
                                <div class="imgs" v-if="item.shareType == '2'">
                                    <video id="video" style="width: 50%;height:110px;" :src="item.shareUrl"
                                        initial-time="0" :controls="true" :autoplay="false" :loop="false"
                                        :muted="false" />
                                </div> -->
                                <div class="foot">{{ item.userGoodSpecName }}</div>
                            </div>
                        </div>
                    </div>
                    <div v-else class="flex-a" style="font-size: 28rpx;">
                        <text>请先</text><nut-button style="white-space: nowrap;margin: 0 5rpx;" size="small"
                            type="default" color="#F0A83F" @click="toLogin">登录</nut-button><text>，才能查看评论。</text>
                    </div>
                </div>
            </nut-tab-pane>
        </nut-tabs>
        <nut-image-preview :pagination-visible="false" :show="showPreview" :images="imgData" @close="hideFn" />
        <nut-popup position="bottom" :style="{ width: '100%', height: '70%' }" v-model:visible="showBottom" closeable
            round class="popup-box">
            <div class="head">
                <div>{{ detail.goodsName }}</div>
                <div>
                    <text class="sell">￥{{ detail.sellingPrice }}</text>
                    <text class="orgin" v-if="detail.sellingPrice != detail.originalPrice">
                        {{ '￥' + detail.originalPrice }}</text>
                    <!-- <nut-tag v-if="user.t == 'takerUser'" color="#FA685D">赚{{ detail.distPrice}}元</nut-tag> -->
                </div>
            </div>
            <div class="add-address flex-a" @click="jumpTo" v-if="type == 'buy' || type == 'fx'">
                <div class="address flex-a flex-b" v-if="addrInfo && addrInfo.addressId">
                    <div class="left">
                        <div class="name flex-a"><span>{{ addrInfo.userName }}</span><span>{{ addrInfo.userPhone
                        }}</span>
                        </div>
                        <div class="addr">{{ addrInfo.provinceName + addrInfo.cityName + addrInfo.regionName +
                            addrInfo.detailAddress }}</div>
                    </div>
                    <div>
                        <Right color="#333333" size="15px" />
                    </div>
                </div>
                <div v-else class="flex-a">
                    <Uploader color="#333333" size="15px" />
                    <div style="margin-left: 10rpx;">添加收货地址</div>
                </div>
            </div>
            <!-- <div class="flex-a join">
                <div class="title">邀请码：</div>
                <div><nut-input v-model="joinCode" placeholder="请输入邀请码" /></div>
            </div> -->
            <div class="spec">
                <div class="title">选择规格：</div>
                <div class="spec-list">
                    <span v-for="(item, index) in detail.specInfoList" :key="item.id"
                        :class="index == select ? 'active' : ''" @click="selectSpec(item, index)">{{ item.specName
                        }}</span>
                </div>
            </div>
            <div class="foot flex-a flex-b">
                <div class="buy">购买数量</div>
                <div><nut-input-number v-model="num" :min="0" @change="changeNum" /></div>
                <div><nut-button type="info" color="#8DCF00" @click="submitCart">购买</nut-button></div>
            </div>
        </nut-popup>
        <!-- <nut-popup position="bottom" :style="{ width: '100%', height: '50%' }" v-model:visible="couponShow" closeable
            round class="popup-coupon">
            <div class="title">红包优惠</div>
            <div class="list">
                <div class="item flex-b" v-for="(item, index) in detail.list" :key="item">
                    <div class="flex-a">
                        <div class="left">
                            <div>￥{{ item.discount }}</div>
                            <div></div>
                        </div>
                        <div class="middle">
                            <div>{{ item.couponName }}</div>
                            <div>{{ item.couponEndTime || '长期有效' }}</div>
                        </div>
                    </div>
                    <div class="right">
                        <div v-if="item.status == 0" @click="receive(item.couponId, index)">立即领取</div>
                        <img v-else src="https://cxj.szzkba.cn/up/uploadPath/icon/pPEflY4.png" alt="">
                    </div>
                </div>
            </div>
        </nut-popup> -->
        <nut-popup position="bottom" :style="{ width: '100%', height: '70%' }" overlay v-model:visible="activeShow"
            closeable round class="active-pop">
            <div class="contents">
                <div class="coupon-list">
                    <div class="coupon-item flex-a flex-b" v-for="(item, index) in couponList" :key="index">
                        <div class="item flex-a">
                            <div class="left">￥<text>{{ item.discount }}</text></div>
                            <div class="middle">
                                <div>每{{ item.min }}减{{ item.discount }}</div>
                                <div>有效期{{ item.couponEndTime }}</div>
                            </div>
                        </div>
                        <div class="right">
                            <nut-button type="warning" v-if="(item.status == 0 && user.nickName) || !user.nickName"
                                size="mini" @click="receive(item, index)">领取</nut-button>
                            <img v-if="user.nickName && item.status == 1"
                                src="https://cxj.szzkba.cn/upload/i/2024/11/07/140128.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="title">更多优惠</div>
                <div v-for="(item, index) in cxActive" class="flex-a cx" :key="index">
                    <text class="name" v-if="index == 0">促销</text>
                    <text :class="index == 0 ? 'text ac' : 'text'">{{ item.nameText }}</text>
                    <text class="des">{{ item.infoText }}</text>
                </div>
            </div>
            <div class="btn"><nut-button shape="square" block color="#8DCF00" type="info"
                    @click="activeShow = false">关闭</nut-button></div>
        </nut-popup>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import mitt from "./../../../../utils/mitt";
import { RectDown, Right, Heart1, HeartFill, Uploader } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getDetail, getDetailNo, getGoodGet, getGoodWant, getShareList, getCouponIndexNo, couponUserOnIndexOn, uploadCart, getCoupon, getCxInfoByGoodId, defaultAddr, getAddressList, saveOrderOnCk, getCart, ckGoods, saveOrderOnFx } from '../../../../api/index'
export default {
    components: {
        RectDown, Right, Uploader, Heart1, HeartFill,
    },
    emits: ['title'],
    setup(props, ctx) {
        const data = reactive({
            end: Date.now() + 30 * 60 * 1000,
            goodsId: '',
            detail: {
                list: []
            },
            html: '',
            showBottom: false,
            couponShow: false,
            activeShow: false,
            joinCode: '',
            showPreview: false,
            imgData: [],
            list: [
                {
                    id: 0,
                    name: '25ml/6片'
                },
                {
                    id: 1,
                    name: '25ml/6片'
                },
                {
                    id: 2,
                    name: '25ml/6片'
                }
            ],
            select: 0,
            specId: '',
            num: 1,
            type: '',
            addrInfo: {},
            addressId: '',
            user: {},
            orderNum: 0,
            collectNum: 0,
            totalPrice: 0,
            cxActive: [],
            couponList: [],
            tab: 0,
            commontList: [],
            page: 2,
            data: {},
            val: 1,
        });
        onMounted(() => {
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    data.user = res.data
                }
            })
            getAllCoupon()
            const router = useRouter();
            if (router.params.scene) {
                data.goodsId = router.params.scene.split('%26')[0].split('%3D')[1]
                getProductDetail(router.params.scene.split('%26')[0].split('%3D')[1])
                getCxInfo(router.params.scene.split('%26')[0].split('%3D')[1])
            }
            console.log(router.params.goodsId)
            if (router.params.goodsId) {
                data.goodsId = router.params.goodsId
                getProductDetail(router.params.goodsId)
                getCxInfo(router.params.goodsId)
                getGoodGet(router.params.goodsId).then(res => {
                    if (res.resultCode == 200) {
                        data.orderNum = res.data
                    }
                })
                getGoodWant(router.params.goodsId).then(res => {
                    if (res.resultCode == 200) {
                        data.collectNum = res.data
                    }
                })
            }
            if (router.params.type) {
                data.type = router.params.type
            }
            if (router.params.addressId) {
                data.addressId = router.params.addressId
                data.showBottom = true
                getAddressList().then(response => {
                    if (response.resultCode == 200 && response.data) {
                        let list = response.data
                        data.addrInfo = list.filter(item => item.addressId == router.params.addressId)[0]
                    }
                })
            } else {
                Taro.getStorage({
                    key: 'user',
                    success: function (res) {
                        if (res.data) {
                            defaultAddr().then(res => {
                                if (res.resultCode == 200) {
                                    data.addrInfo = res.data
                                }
                            })
                            getList()
                        }
                    }
                })

            }

        });
        const getCommonts = () => {
            getShareList().then(res => {
                if (res.resultCode == 200) {
                    // data.commontList = res.data
                    let list = res.data, arr = [] as any
                    list.forEach((item, index) => {
                        // arr.push(Object.assign({}, { ...item }, shareUrlList:[]))
                        arr.push(
                            {
                                userGoodSpecName: item.userGoodSpecName,
                                shareContent: item.shareContent,
                                createTime: item.createTime,
                                userName: item.userName,
                                introduceSign: item.introduceSign,
                                shareUrlList: []
                            }
                        )
                        item.shareUrlList.forEach((ele, ind) => {
                            if (ele.indexOf('.png') > 0 || ele.indexOf('.jpg') > 0 || ele.indexOf('.jpeg') > 0 || ele.indexOf('.bmp') > 0 || ele.indexOf('.psd') > 0) {
                                arr[index].shareUrlList.push(
                                    {
                                        shareType: '1',
                                        url: ele
                                    }
                                )
                            } else if (ele.indexOf('.mp3') > 0 || ele.indexOf('.mp4') > 0 || ele.indexOf('.avi') > 0 || ele.indexOf('.mov') > 0 || ele.indexOf('.flv') > 0) {
                                arr[index].shareUrlList.push(
                                    {
                                        shareType: '2',
                                        url: ele
                                    }
                                )
                            }
                        })
                    })
                    data.commontList = arr
                }
            })
        }
        const toLogin = () => {
            const router = useRouter();
            Taro.navigateTo({ url: router.params.userId ? '/pages/mypage/index?goodsId=' + goodsId + '&name=myPage' + '&userId=' + router.params.userId : '/pages/mypage/index?goodsId=' + goodsId + '&name=myPage' });
        }
        const changeNum = () => {
            data.totalPrice = Number(data.detail.sellingPrice) * data.num
            mitt.emit('totalPrice', data.totalPrice)
        }
        const collect = () => {
            ckGoods(data.goodsId).then(res => {
                if (res.resultCode == 200) {
                    Taro.showToast({
                        title: '收藏成功',
                        icon: 'success',
                        duration: 2000
                    })
                    data.detail.goodStatus = 1
                }
            })
        }
        const resetCollect = () => {
            ckGoods(data.goodsId).then(res => {
                if (res.resultCode == 200) {
                    Taro.showToast({
                        title: '取消收藏',
                        icon: 'success',
                        duration: 2000
                    })
                    data.detail.goodStatus = 0
                }
            })
        }
        const getList = () => {
            getCart().then(res => {
                if (res.resultCode == 200) {
                    mitt.emit('cartNum', res.data.list.length)
                }
            })
        }
        const getProductDetail = (id) => {
            Taro.getStorage({
                key: 'token',
                success: function (res) {
                    getDetail(id).then(res => {
                        if (res.resultCode == 200) {
                            data.detail = res.data
                            data.detail.sellingPrice = res.data.specInfoList[0].specSellingPrice
                            data.detail.originalPrice = res.data.specInfoList[0].specOriginalPrice
                            data.totalPrice = Number(data.detail.sellingPrice) * data.num
                            mitt.emit('totalPrice', data.totalPrice)
                            mitt.emit('detail', res.data)
                            ctx.emit('title', res.data.goodsName)
                            data.html = formatImg(res.data.goodsDetailContent)
                        }
                    })
                },
                fail: function (rej) {
                    getDetailNo(id).then(res => {
                        if (res.resultCode == 200) {
                            data.detail = res.data
                            data.detail.sellingPrice = res.data.specInfoList[0].specSellingPrice
                            data.detail.originalPrice = res.data.specInfoList[0].specOriginalPrice
                            data.totalPrice = Number(data.detail.sellingPrice) * data.num
                            mitt.emit('totalPrice', data.totalPrice)
                            mitt.emit('detail', res.data)
                            ctx.emit('title', res.data.goodsName)
                            data.html = formatImg(res.data.goodsDetailContent)
                        }
                    })
                }
            })
        };
        const formatImg = (html) => {
            var newContent = html.replace(/<img[^>]*>/gi, (match) => {
                let processed = null;
                if (!match.match(/style=\"(.*)\"/gi)) {
                    processed = match.replace(/\<img/g, '<img style="width:100%;height:auto;display:block"');
                } else {
                    processed = match.replace(/style=\"(.*)\"/gi, 'style="width:100%;height:auto;display:block"');
                }
                return processed;
            });
            return newContent;
        }
        const selectSpec = (item, index) => {
            data.select = index
            data.specId = item.specId
            data.detail.sellingPrice = item.specSellingPrice
            data.detail.originalPrice = item.specOriginalPrice
            data.detail.distPrice = item.distPrice
        }
        mitt.on("show", (val) => {
            data.type = val[0]
            data.showBottom = val[1]
        })
        const submitCart = () => {
            const router = useRouter();
            if (router.params.userId) {
                Taro.setStorage({
                    key: "userId",
                    data: router.params.userId
                })
            }
            if (data.type == 'cart') {
                uploadCart({ goodsCount: parseInt(data.num), goodsId: data.detail.goodsId, cartItemId: 0, specId: data.specId || data.detail.specInfoList[0].specId }).then(res => {
                    if (res.resultCode == 200) {
                        Taro.showToast({
                            title: '添加成功',
                            icon: 'success',
                            duration: 2000
                        })
                        getList()
                        data.showBottom = false
                    } else if (res.resultCode == 500) {
                        Taro.showToast({
                            title: res.message,
                            icon: 'error',
                            duration: 2000
                        })
                    }
                })
            }
            else if (data.type == 'buy') {
                if (data.addrInfo && data.addrInfo.addressId) {
                    saveOrderOnCk({
                        addressId: data.addrInfo.addressId, goodsId: data.goodsId, num: data.num, specId: data.specId || data.detail.specInfoList[0].specId, code: data.joinCode
                    }).then(res => {
                        if (res.resultCode == 200) {
                            Taro.redirectTo({
                                url: '/packageA/pages/confirmPay/index?addressId=' + data.addrInfo.addressId + '&orderId=' + res.data,
                            })
                        } else if (res.resultCode == 500) {
                            Taro.showToast({
                                title: res.message,
                                icon: 'error',
                                duration: 2000
                            })
                        }
                    })
                } else {
                    Taro.showToast({
                        title: '请添加收货地址！',
                        icon: 'error',
                        duration: 2000
                    })
                }
            } else if (data.type == 'fx') {
                if (data.addrInfo && data.addrInfo.addressId) {
                    saveOrderOnFx({
                        addressId: data.addrInfo.addressId, goodsId: data.goodsId, num: data.num, specId: data.specId || data.detail.specInfoList[0].specId, code: data.joinCode
                    }).then(res => {
                        if (res.resultCode == 200) {
                            Taro.redirectTo({
                                url: '/packageA/pages/confirmPay/index?addressId=' + data.addrInfo.addressId + '&orderId=' + res.data,
                            })
                        } else if (res.resultCode == 500) {
                            Taro.showToast({
                                title: res.message,
                                icon: 'error',
                                duration: 2000
                            })
                        }
                    })
                } else {
                    Taro.showToast({
                        title: '请添加收货地址！',
                        icon: 'error',
                        duration: 2000
                    })
                }
            }
        }
        const showCoupon = () => {
            data.couponShow = true
        }
        const receive = (ele, index) => {
            getCoupon({ couponId: ele.couponId, pUserId: null }).then(res => {
                if (res.resultCode == 200) {
                    Taro.showToast({
                        title: '领取成功',
                        icon: 'success',
                        duration: 2000
                    })
                    data.couponList[index].status = 1
                    getAllCoupon()
                }
            })
        }
        const getAllCoupon = () => {
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    if (res.data) {
                        data.user = res.data
                        getCommonts()
                        couponUserOnIndexOn().then(res => {
                            if (res.resultCode == 200) {
                                data.couponList = res.data
                            }
                        })
                    }
                },
                fail: function (re) {
                    getCouponIndexNo().then(res => {
                        if (res.resultCode == 200) {
                            data.couponList = res.data
                        }
                    })
                }
            })
        }
        const jumpTo = () => {
            const router = useRouter();
            if (data.addrInfo.addressId) {
                if (router.params.userId) {
                    Taro.navigateTo({ url: '/packageA/pages/addressList/index?type=' + data.type + '&goodsId=' + data.goodsId + '&addressId=' + data.addrInfo.addressId + '&userId=' + router.params.userId });
                } else {
                    Taro.navigateTo({ url: '/packageA/pages/addressList/index?type=' + data.type + '&goodsId=' + data.goodsId + '&addressId=' + data.addrInfo.addressId });
                }
            } else {
                if (router.params.userId) {
                    Taro.navigateTo({ url: '/packageA/pages/addressList/index?type=' + data.type + '&goodsId=' + data.goodsId + '&userId=' + router.params.userId });
                } else {
                    Taro.navigateTo({ url: '/packageA/pages/addressList/index?type=' + data.type + '&goodsId=' + data.goodsId });
                }
            }
        }
        const jump = (url) => {
            Taro.navigateTo({ url: url });
        }
        const fxShow = () => {
            data.type = 'fx'
            data.showBottom = true
        }
        const selShow = () => {
            data.type = 'buy'
            data.showBottom = true
        }
        const getCxInfo = (id) => {
            getCxInfoByGoodId(id).then(res => {
                if (res.resultCode == 200) {
                    data.cxActive = res.data
                }
            })
        }
        const showAll = () => {
            data.activeShow = true
        }
        const showFn = (item) => {
            let list = item.shareUrlList, arr = []
            list.forEach(item => {
                arr.push({ src: item.url })
            })
            data.imgData = arr
            data.showPreview = true
        }
        const hideFn = () => {
            data.showPreview = false
        }
        const onChange = (index) => {
            data.val = index + 1
        }
        return {
            ...toRefs(data), showAll, getAllCoupon, toLogin, onChange, showFn, hideFn, getCxInfo, getCommonts, getProductDetail, jump, formatImg, selectSpec, submitCart, showCoupon, receive, jumpTo, getList, collect, resetCollect, fxShow, selShow, changeNum
        }
    }
};
</script>


<style lang="scss">
.detail {
    .nut-swiper-item {
        line-height: 400px;

        img {
            width: 100%;
            height: 100%;
            background: #fff;
        }
    }

    .swiper-pagination {
        position: absolute;
        bottom: 40rpx;
        right: 20rpx;
        width: 46px;
        height: 22px;
        background: rgba(0, 0, 0, 0.33);
        border-radius: 22px;
        text-align: center;
        color: #fff;
        font-size: 14px;
    }

    .promotion {
        padding: 30rpx 30rpx 20rpx;
        background: #fff;
        border-radius: 20rpx;
        margin: 20rpx 32rpx 20rpx;

        .coupon {
            margin: 10rpx 0 20rpx;

            div:first-child {
                text {
                    color: red;
                    font-size: 24rpx;
                    border: 1rpx solid red;
                    border-radius: 10rpx;
                    padding: 2rpx 15rpx;
                    margin-right: 20rpx;
                    white-space: nowrap;
                }
            }

            div:last-child {
                color: #333;
                font-size: 24rpx;

                text {
                    margin-right: 5rpx;
                    white-space: nowrap;
                }
            }
        }

        div.cxActive {
            white-space: nowrap;
            font-size: 24rpx;
            color: #75787B;
            margin-bottom: 10rpx;

            .name {
                color: #333;
            }

            .text {
                padding: 3rpx 10rpx;
                border-radius: 20rpx;
                color: #FFB060;
                border: 1rpx solid #FFB060;
                margin: 0 10rpx 0 60rpx;
                font-size: 20rpx;
            }

            .text.ac {
                margin: 0 10rpx 0 14rpx;
            }

            .des {
                display: inline-block;
                width: 75%;
                box-sizing: border-box;
                word-break: keep-all;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .des-last {
                display: inline-block;
                width: 59%;
            }
        }
    }

    .choose {
        padding: 30rpx 30rpx 20rpx;
        background: #fff;
        border-radius: 20rpx;
        margin: 20rpx 32rpx 20rpx;

        div.selest {
            font-size: 24rpx;
            margin-bottom: 10rpx;

            text:first-child {
                color: #000;
                font-weight: bold;
                margin-right: 20rpx;
            }

            text:last-child {
                color: #565A5E;
            }

        }

        div.bz {
            color: #B8BABB;
            font-size: 20rpx;

            div {
                margin-right: 20rpx;
            }

            img {
                width: 25rpx;
                height: 25rpx;
            }
        }
    }

    .info {
        padding: 30rpx 30rpx 20rpx;
        background: #fff;
        border-radius: 20rpx;
        margin: -30rpx 32rpx 20rpx;
        z-index: 999;
        position: relative;

        .goods-title {
            color: #000;
            font-size: 34rpx;
            font-weight: bold;

            div {
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }

        .des {
            color: #333;
            font-size: 24rpx;
            margin: 10rpx 0;

            text {
                color: #FF8D1A;
            }

            div:last-child {
                color: #9DA0A2;
            }
        }

        .price {
            color: #F25C26;
            font-size: 26rpx;
            margin-bottom: 20rpx;

            .sell {
                font-size: 38rpx;
                font-weight: bold;
                color: #000;
            }

            .orgin {
                font-size: 24rpx;
                margin: 0 20rpx;
                color: #CEF542;
                background: #0B1117;
                padding: 5rpx 10rpx;
                border-radius: 10rpx;
            }
        }

        .coupon {
            margin-top: 10rpx;

            div:first-child {
                text {
                    color: red;
                    font-size: 24rpx;
                    border: 1rpx solid red;
                    border-radius: 10rpx;
                    padding: 2rpx 4rpx;
                    margin-right: 5rpx;
                }
            }

            div:last-child {
                color: #333;
                font-size: 24rpx;

                text {
                    margin-right: 5rpx;
                }
            }
        }
    }

    .popup-coupon {

        .title {
            text-align: center;
            margin: 20rpx auto 30rpx;
        }

        .list {
            .item {
                margin: 0 auto 10rpx;
                background: #fff;
                box-shadow: 0 0 20rpx 20rpx #F9F9F9;
                border-radius: 20rpx;
                width: 94%;
                padding: 20rpx 0 20rpx 30rpx;
                box-sizing: border-box;

                .left {
                    margin-right: 60rpx;

                    div:first-child {
                        color: #FB452E;
                        font-size: 36rpx;
                    }

                    div:last-child {
                        color: #9C9C9C;
                        font-size: 24rpx;
                    }
                }

                .middle {
                    div:first-child {
                        color: #333;
                        font-weight: bold;
                        font-size: 30rpx;
                    }

                    div:last-child {
                        color: #FB452E;
                        font-size: 24rpx;
                    }
                }

                .right {
                    width: 30%;
                    border-left: 1rpx dashed #EAEAEA;
                    position: relative;

                    div {
                        display: inline-block;
                        border-radius: 30rpx;
                        padding: 4rpx 15rpx;
                        border: 1rpx solid #FB452E;
                        font-size: 24rpx;
                        color: #FB452E;
                        white-space: nowrap;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        z-index: 999999;
                    }

                    img {
                        width: 80rpx;
                        height: 80rpx;
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        transform: rotate(-10deg);
                    }
                }
            }
        }
    }

    .popup-box {
        .head {
            background: #FAFAFA;
            padding: 30rpx 20rpx;

            div:first-child {
                width: 90%;
                color: #000;
                font-size: 30rpx;
                font-weight: bold;
                margin-bottom: 10rpx;
                padding-right: 50rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            div:last-child {
                .sell {
                    font-size: 30rpx;
                    font-weight: bold;
                    color: #F25C26;
                }

                .orgin {
                    margin: 0 10rpx;
                    font-size: 26rpx;
                    text-decoration: line-through;
                    color: #909090;
                }
            }
        }

        .add-address {
            border-top: 1rpx solid #E9E9E9;
            border-bottom: 1rpx solid #E9E9E9;
            padding: 30rpx 10rpx 30rpx 30rpx;

            .address {
                white-space: nowrap;

                .left {
                    width: 670rpx;
                }

                .name {
                    span:first-child {
                        color: #212121;
                        font-size: 34rpx;
                    }

                    span:last-child {
                        color: #808080;
                        font-size: 28rpx;
                    }
                }

                .addr {
                    font-size: 34rpx;
                }
            }
        }

        .join {
            padding: 30rpx 20rpx 0;

            .title {
                font-size: 30rpx;
            }
        }

        .spec {
            padding: 30rpx 20rpx;

            .title {
                font-size: 30rpx;
                margin-bottom: 40rpx;
            }

            .spec-list {
                height: 500rpx;
                overflow-y: auto;

                span {
                    margin: 0 20rpx 20rpx 0;
                    display: inline-block;
                    color: #929292;
                    border: 1rpx solid #AAAAAA;
                    padding: 20rpx 30rpx;
                    border-radius: 8rpx;
                    font-size: 26rpx;
                    box-sizing: border-box;
                }

                span.active {
                    background: #fff;
                    border-color: #8DCF00;
                    font-weight: bold;
                    color: #8DCF00;
                }
            }
        }

        .foot {
            background: #FAFAFA;
            padding: 30rpx 20rpx;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            box-sizing: border-box;

            .nut-button {
                width: 300rpx;
                border-radius: 10rpx;
            }
        }
    }
}

.active-pop {
    .btn {
        .nut-button {
            border-radius: 10rpx;
            width: 92%;
            margin: 0 4%;
            position: fixed;
            bottom: 10rpx;
        }
    }

    .contents {
        background: #fff;
        border-radius: 20rpx;
        margin: 70rpx 32rpx 20rpx;

        .coupon-list {
            margin: 80rpx 0 20rpx;

            .coupon-item {
                background: #FFF7F4;
                border-radius: 20rpx;
                padding: 20rpx 40rpx;
                margin-bottom: 15rpx;

                // .item {
                //     width: 70%;
                // }

                .left {
                    color: #F92F21;
                    font-size: 26rpx;
                    margin-right: 30rpx;
                    width: 110rpx;

                    text {
                        font-size: 52rpx;
                        font-weight: bold;
                    }
                }

                .middle {
                    color: #D23F35;
                    font-size: 28rpx;

                    div:first-child {
                        margin-bottom: 10rpx;
                        font-size: 32rpx;
                    }
                }

                .right {
                    position: relative;

                    img {
                        width: 97rpx;
                        height: 64rpx;
                        position: absolute;
                        right: -40rpx;
                        bottom: -30rpx;
                        transform: rotate(-10deg);
                    }
                }

                .nut-button {
                    position: absolute;
                    right: -20rpx;
                    white-space: nowrap;
                    bottom: -30rpx;
                }
            }
        }

        .title {
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
            color: #000;
        }

        div.cx {
            font-size: 24rpx;
            color: #75787B;
            margin-bottom: 10rpx;

            .name {
                color: #333;
            }

            .text {
                padding: 3rpx 10rpx;
                border-radius: 20rpx;
                color: #FFB060;
                border: 1rpx solid #FFB060;
                margin: 0 10rpx 0 60rpx;
                font-size: 20rpx;
            }

            .text.ac {
                margin: 0 10rpx 0 14rpx;
            }

            .des {
                display: inline-block;
                width: 65%;
            }

            .des-last {
                display: inline-block;
                width: 59%;
            }
        }

        div:first-child {
            .text {
                margin: 0 10rpx 0 14rpx;
            }
        }
    }
}

.eval-list {

    .eval-item {
        margin-bottom: 10rpx;
        border-bottom: 1rpx solid #F2ECEC;

        .head {
            .avatar {
                width: 60%;
                font-size: 24rpx;
                height: 80rpx !important;

                .nick {
                    color: #212443;
                }

                img {
                    width: 50rpx;
                    height: 50rpx;
                    border-radius: 50%;
                    margin-right: 20rpx;
                }
            }

            .time {
                width: 40%;
                color: #A8A8A8;
                font-size: 24rpx;
                text-align: right;
            }
        }

        .spec {
            color: #9D9EAA;
            font-size: 24rpx;
            margin: 10rpx 0;

            div:first-child {
                margin-right: 40rpx;
            }
        }

        .box {
            padding-bottom: 20rpx;

            .text {
                color: #2D2F4D;
                font-size: 24rpx;
            }

            .star {
                margin: 0 0 20rpx;

                .nut-rate-item {
                    margin-right: 8rpx !important;
                }
            }

            .imgs {
                img {
                    width: 32%;
                    border-radius: 10rpx;
                    height: 200rpx;
                }

                img:nth-child(2) {
                    margin: 0 2%;
                }
            }

            .foot {
                color: #9FA19F;
                font-size: 22rpx;
                margin-top: 10rpx;
                word-break: keep-all;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>